<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-waterfall>
					<pure-waterfall-item
						v-for="(item, index) in list"
						:key="index"
						:index="index"
						:loaded="item.loaded"
						:data="item"
					>
						<view class="item">
							<image
								class="image"
								:src="item.image"
								mode="widthFix"
								@load="item.loaded = true"
							/>
							<view class="content">
								<view class="title">{{ item.title }}</view>
								<view class="desc">{{ item.desc }}</view>
							</view>
						</view>
					</pure-waterfall-item>
				</pure-waterfall>
			</pj-demo>
		</view>

		<pure-loadmore :status="loadStatus"></pure-loadmore>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow, onReachBottom } from "@dcloudio/uni-app";

	// **************************************************************************************************************
	// * Refs
	// **************************************************************************************************************
	const pageIndex = ref(1);
	const loadStatus = ref("more");
	const list = ref([]);

	// **************************************************************************************************************
	// * Computeds
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Watches
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * 生命周期
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Functions
	// **************************************************************************************************************
	// 加载数据
	function loadData() {
		if (pageIndex.value > 5) {
			return;
		}

		// 模拟加载数据
		loadStatus.value = "loading";
		const _list = [];
		for (let i = 1; i <= 9; i++) {
			const _item = {
				image: `/static/images/w_${i}.jpeg`,
				loaded: false,
				title: `我是一个标题`,
				desc: `我是一个描述`
			};
			_list.push(_item);
		}
		list.value.push(..._list);

		// 模拟加载完成
		if (pageIndex.value > 5) {
			loadStatus.value = "nomore";
		} else {
			loadStatus.value = "more";
			pageIndex.value++;
		}
	}

	onReachBottom(() => {
		loadData();
	});
	loadData();
</script>

<style lang="scss" scoped>
	.page {
		.item {
			background: var(--pure-background-default);
			border-radius: var(--pure-radius-default);
			overflow: hidden;

			.image {
				display: block;
				width: 100%;
				height: auto;
			}

			.content {
				padding: 12px 16px;
			}

			.title {
				font-weight: 500;
			}

			.desc {
				color: var(--pure-text-color-light);
				font-size: var(--pure-font-size-small);
			}
		}
	}
</style>
